<template>
  <div class="Playlistdetail">
    <div class="Playlistdetail-top-box">
      <div class="Playlistdateil-top-left-img">
        <img
          class="title-img"
          :src="$utils.getImgUrl(playlistSongs.coverImgUrl, 200, 200)"
          alt
        />
      </div>
      <div class="Play-top-Right-textcontainer">
        <h6 class="Play-top-Right-textcontainer-songs">
          {{ playlistSongs.name }}
        </h6>
        <div class="Play-top-Right-textcontainer-time">
          <img
            class="Play-top-Right-litle-img"
            :src="
              $utils.getImgUrl(
                playlistSongs.creator && playlistSongs.creator.avatarUrl
              )
            "
            alt
          />
          <span class="text-span">{{
            playlistSongs.creator && playlistSongs.creator.nickname
          }}</span>
          <span class="text-span">{{
            playlistSongs.createTime &&
            getplayListCreateTime(
              playlistSongs.createTime,
              "yyyy-mm-dd HH:MM:ss"
            )
          }}</span>
        </div>

        <div class="Play-top-Right-textcontainer-btn">
          <i
            class="icon middle iconfont icon-component icon-play-round icon-color-white"
          ></i>
          播放全部
        </div>
        <p class="Play-top-Right-textcontainer-lable">
          <span>标签：</span>
          {{ playlistSongs.tags }}
        </p>
        <p class="Play-top-Right-textcontainer-lableIntroduction">
          <span>简介:</span>
          {{ playlistSongs.description }}
        </p>
      </div>
    </div>

    <div class="Playlistdateil-Content">
      <div class="Content-title-bar">
        <ul class="Content-title-bar-nav">
          <li
            class="Content-title-item"
            :class="chanageindex ? 'listcolor' : ''"
            @click="handleTiggter('songs')"
          >
            歌曲列表
          </li>
          <li
            class="Content-title-item"
            :class="chanageindex2 ? 'listcolor' : ''"
            @click="handleTiggter('comments')"
          >
            评论({{ this.Total }})
          </li>
          <!-- onclick="this.style.color='red'" -->
        </ul>
      </div>

      <div class="Playlistdateil-Content-songs">
        <ul>
          <li
            class="Playlistdateil-Content-songs-item"
            v-show="currentTab === 'songs'"
          >
            <!-- 歌曲列表 -->
            <div class="songs-senter">
              <ul class="songs-senter-list">
                <li
                  class="songs-senter-item"
                  :class="[songsListColor === index ? 'current' : '']"
                  v-for="(item, index) of songs"
                  :key="item.id"
                  @click="hanglePlaySongs(item, songs, index)"
                >
                  <div class="songs-senter-box">
                    <span class="songs-senter-number">{{
                      index + 1 >= 10 ? index + 1 : "0" + (index + 1)
                    }}</span>
                    <div class="songs-senter-img">
                      <img
                        class="songs-img-item"
                        :src="$utils.getImgUrl(item.al.picUrl, 200, 200)"
                        alt
                      />
                      <div class="songs-senter-img-btn">
                        <i
                          class="play-icon iconfont icon-component icon-play"
                        ></i>
                      </div>
                    </div>
                    <span class="songs-senter-songs">{{ item.name }}</span>

                    <span class="songs-senter-singer">{{
                      getName(item.ar)
                    }}</span>
                    <span class="songs-senter-songs-right">{{
                      item.name
                    }}</span>
                    <span class="songs-senter-time">{{
                      getsongstime(item.dt)
                    }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <!-- 评论列表 -->
          <li
            class="Playlistdateil-Content-pinglun-item"
            v-show="currentTab === 'comments'"
          >
            <div class="Playlistdateil-Content-splendid-comments">
              <p v-if="hotComments">精彩评论</p>
              <div class="Playlistdateil-Content-splendid-comments-wramp">
                <ul>
                  <li v-for="items of hotComments" :key="items.id">
                    <div class="new-comments-img">
                      <img
                        :src="$utils.getImgUrl(items.user.avatarUrl, 40, 40)"
                        alt
                      />
                    </div>

                    <div class="new-comments-text">
                      <p>
                        <span class="new-comments-text-address-name">{{
                          items.user.nickname
                        }}</span>
                        <span>{{ items.content }}</span>
                      </p>

                      <p
                        class="Replyto-comment"
                        v-show="items.beReplied.length"
                      >
                        <span class="text-Replyto-comment-address-name">{{
                          items.beReplied.length &&
                          items.beReplied[0].user.nickname
                        }}</span>
                        <span>{{
                          items.beReplied.length && items.beReplied[0].content
                        }}</span>
                      </p>

                      <div class="new-comments-text-create-time">
                        <span class="create-times">{{
                          getplayListCreateTime(
                            items.time,
                            "yyyy-mm-dd HH:MM:ss"
                          )
                        }}</span>
                        <span class="Thumb-up">
                          <i class="iconfont icon-component icon-good">{{
                            items.likedCount
                          }}</i>
                        </span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="Playlistdateil-Content-new-comments">
              <p>最新评论</p>
              <div class="Playlistdateil-Content-splendid-comments-wramp">
                <ul>
                  <li v-for="newItem of Comment" :key="newItem.id">
                    <div class="new-comments-img">
                      <img
                        :src="$utils.getImgUrl(newItem.user.avatarUrl, 40, 40)"
                        alt
                      />
                    </div>

                    <div class="new-comments-text">
                      <p>
                        <span class="new-comments-text-address-name">{{
                          newItem.user.nickname + ":"
                        }}</span>
                        <span>{{ newItem.content }}</span>
                      </p>
                      <!-- v-if="newitem.beReplied.lenght!==0 " -->
                      <p
                        class="Replyto-comment"
                        v-show="newItem.beReplied.length"
                      >
                        <span class="text-Replyto-comment-address-name">{{
                          newItem.beReplied.length &&
                          newItem.beReplied[0].user.nickname
                        }}</span>
                        <span>{{
                          newItem.beReplied.length &&
                          newItem.beReplied[0].content
                        }}</span>
                      </p>
                      <div class="new-comments-text-create-time">
                        <span class="create-times">{{
                          getplayListCreateTime(
                            newItem.time,
                            "yyyy-mm-dd HH:MM:ss"
                          )
                        }}</span>
                        <span class="Thumb-up">
                          <i class="iconfont icon-component icon-good">{{
                            newItem.likedCount
                          }}</i>
                        </span>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <div class="paginate">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="Total"
              :page-size="20"
              @current-change="change"
            ></el-pagination>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchPlayListMore,
  fetchPlayListSongs,
  fetchPlayListComment,
} from "../api";
import dateFormat from "dateformat";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      topNavList: [],
      // detailId: "",
      playlistSongs: {},

      currentTab: "songs",

      ArrIdsong: [],
      chanageindex: true,
      chanageindex2: false,
      //歌曲列表
      songs: [],
      MoreId: [],

      //评论列表
      hotComments: [],
      Comment: [],
      //页码
      Total: 0,
      page: 1,

      songsTimelength: 0,
      //显示隐藏
    };
  },
  // wacth(newId, oldId) {
  //   if (newId == oldId) {
  //     this.hanglePlaySongs();
  //   }
  // },
  watch: {
    $route() {
      this.getId();

      this.getPlaysongslist();

      this.getPlayCommment();
    },
  },
  computed: {
    ...mapState(["currentSong", "songsListColor", "isPlay"]),
  },

  mounted() {
    this.init();
  },
  methods: {
    ...mapMutations([
      "setCurrentSong",
      "setSongsList",
      "setSongsListColor",
      "setplaystatus",
      "setRecordPlaylist",
    ]),
    init() {
      this.getId();
      this.getPlaysongslist();

      this.getPlayCommment();
    },
    getId() {
      const { Arrid } = this.$route.query;
      this.ArrIdsong = Arrid;
    },
    //切换歌曲/评论
    handleTiggter(type) {
      this.currentTab = type;
      this.chanageindex = !this.chanageindex;
      this.chanageindex2 = !this.chanageindex2;
    },
    change(ye) {
      this.page = ye;
      this.getPlayCommment();
      // console.log(this.page);
    },

    //获取歌单详情的一些内容
    getPlaysongslist() {
      fetchPlayListMore({
        id: this.ArrIdsong,
      })
        .then((res) => {
          this.playlistSongs = res.playlist;
          //第一个接口请求到的数据
          // console.log(this.playlistSongs);
          this.MoreId = this.playlistSongs.trackIds.map(({ id }) => id);

          return fetchPlayListSongs({
            ids: this.MoreId.join(),
          });
        })
        .then((res) => {
          this.songs = res.songs;
        });
    },
    //vuex
    hanglePlaySongs(song, songs, index) {
      this.setCurrentSong(song);
      this.setSongsList(songs);
      this.setSongsListColor(index);
      this.setplaystatus(true);
      this.setRecordPlaylist(song); //播放列表添加
      // console.log(song.dt);
    },
    //获取歌单详情里面的评论消息
    getPlayCommment() {
      fetchPlayListComment({
        id: this.ArrIdsong,
        offset: (this.page - 1) * 20,
        limit: this.pageSize,
      }).then((res) => {
        this.hotComments = res.hotComments;
        this.Comment = res.comments;
        this.Total = res.total;
        // console.log(this.Comment);
        // console.log(this.hotComments);
      });
    },

    getName(arr = []) {
      return arr
        .map((item) => {
          return item.name;
        })
        .join("/");
    },
    //获取歌曲时间
    getsongstime(item) {
      const ST = item / 1000 / 60;
      const M = parseInt(ST);
      const S = (ST - M) * 60;
      const SS = Math.ceil(S);
      // const S = ST % 60;
      const SSS = String(SS).length === 1 ? "0" + SS : SS;

      const Times = M + ":" + SSS;

      return Times;
    },

    //获取年月日
    getplayListCreateTime(Ms, Format = "yyyy-mm-dd HH:MM:ss") {
      // console.log(ms);
      return dateFormat(new Date(Ms), Format);
      // const CreateTime = new Date();
      // const Y = getFullYear(CreateTime);
      // const M = getMonth(CreateTime) + 1;
      // const D = getDay(CreateTime);
      // const YMD = Y + "-" + M + "-" + D;
      // return YMD;
    },
  },
};
</script>

<style lang="less" scoped>
.Playlistdetail {
  padding: 0 10px;
  .Playlistdetail-top-box {
    position: relative;
    height: 249px;
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
    font-size: 0.9rem;
    color: #333333;

    .Playlistdateil-top-left-img {
      // position: absolute;
      // left: 0px;
      float: left;
      // top: 35px;

      width: 200px;
      height: 200px;

      display: flex;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .Play-top-Right-textcontainer {
      position: absolute;
      left: 200px;
      padding-left: 30px;
      height: 200px;
      float: left;
      width: 550px;
      p {
        margin: 10px 0px;
        span {
          margin: 0px 5px;
        }
      }
      .Play-top-Right-textcontainer-time {
        margin: 10px 0px;
        span {
          width: 10px;
          height: 10px;
          margin: 0px 16px;
        }
      }
      //text-span设置小图片旁边文字上下居中

      .Play-top-Right-textcontainer-time {
        img {
          height: 30px;
          width: 30px;
          border-radius: 50%;
          position: relative;
          top: 11px;
        }
      }
      .Play-top-Right-textcontainer-btn {
        color: white;
        height: 30px;
        width: 120px;
        background: #fa5143;
        border-radius: 3px;
        line-height: 2;
        text-align: center;
        margin: 15px 0px;
      }
      .Play-top-Right-textcontainer-lableIntroduction {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.3;
      }
    }
  }
  .Playlistdateil-Content {
    // border-bottom: 1px solid #ddd;

    .Content-title-bar-nav {
      margin-bottom: 20px;
    }

    .Content-title-bar {
      width: 100%;
      margin-bottom: 15px;
      border-bottom: 1px solid #ddd;

      .Content-title-bar-nav {
        cursor: pointer;
        .listcolor {
          color: #d33a31;
          font-weight: bold;
        }
      }
      .Content-title-item {
        display: inline-block;
        margin-right: 20px;
        // color: #5c5c5c;
      }
    }
  }

  .songs-senter {
    width: 100%;
    height: 100%;
  }

  .songs-senter-list {
    width: 100%;

    padding-top: 8px;
  }
  .songs-senter-item {
    min-width: 120px;
    position: relative;
    // padding: 0 16px 18px 0px;
    flex-shrink: 1;
    flex: 1;
    border-radius: 5px;
    &:hover {
      background-color: rgb(231, 231, 231);
    }

    &.current {
      color: red;
      font-weight: bold;
    }
  }

  .songs-senter-box {
    position: relative;
    height: 67px;
    left: 5px;
    font-size: 12px;

    // color: #606266;
  }
  .songs-senter-number {
    position: absolute;
    left: 10px;
    line-height: 72px;

    text-align: center;
  }
  .songs-senter-img {
    position: absolute;
    top: 4px;
    left: 90px;
    .songs-img-item {
      height: 60px;
      width: 60px;
      border-radius: 7px;
    }
    .songs-senter-img-btn {
      position: absolute;
      bottom: 18px;
      right: 14px;
      width: 30px;
      height: 30px;
      background-color: rgba(255, 255, 255, 0.6);
      line-height: 36px;
      text-align: center;
      color: red;
      border-radius: 50%;
      .icon-play {
        position: absolute;
        font-size: 15px;
        margin-left: -6px;
        margin-top: -2px;
      }
    }
  }
  .songs-senter-songs,
  .songs-senter-singer,
  .songs-senter-songs-right,
  .songs-senter-time {
    width: 180px;
    line-height: 72px;
    //文本三件套
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .songs-senter-songs {
    position: absolute;
    left: 230px;
  }
  .songs-senter-singer {
    position: absolute;
    left: 440px;
  }
  .songs-senter-songs-right {
    position: absolute;
    left: 640px;
  }
  .songs-senter-time {
    position: absolute;
    left: 820px;
  }

  // 评论样式.
  .Playlistdateil-Content-new-comments {
    padding-top: 10px;
  }

  .Playlistdateil-Content-pinglun-item {
    width: 100%;
    height: 100%;
    li {
      display: flex;
    }
    .new-comments-img {
      height: 60px;
      width: 10%;
      // background: rosybrown;
      margin-top: 10px;
      img {
        flex-shrink: 0;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin: 10px 5px;
        // position: relative;
        // top: 11px;
      }
    }
    .new-comments-text {
      flex: 1;

      p {
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }
      font-size: 12px;
      line-height: 1.4;
      border-bottom: 1px solid #bebebe;
      padding: 10px 0;
      .new-comments-text-address-name {
        color: rgba(35, 82, 184, 0.6);
      }
    }
    .new-comments-text-create-time {
      margin: 10px 0px;
      font-size: 12px;
      color: #bebebe;
      .Thumb-up {
        float: right;
        i {
          font-size: 12px;
        }
      }
    }
    .Replyto-comment {
      margin-left: 5px;
      background: #e6e5e6;
      padding: 7px 0;
      border-radius: 3px;

      .text-Replyto-comment-address-name {
        color: rgba(35, 82, 184, 0.6);
      }
    }
  }
  //分页
  .paginate {
    float: right;
    margin: 15px 0;
  }
}
</style>